import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../pages/Home'
// import About from '../pages/About'
// import PageNotFound from '../pages/PageNotFound'
// import News from '../pages/News'
// import Message from '../pages/Message'
// import Detail from '../pages/Detail'
// 懒加载 方式一： import 实现
// 方式二： resolve
// const Home = ()=>import('../pages/Home')
// const About = ()=>import('../pages/About')
// const PageNotFound = ()=>import('../pages/PageNotFound')
// const News = ()=>import('../pages/News')
// const Message = ()=>import('../pages/Message')
// const Detail = ()=>import('../pages/Detail')

const Home = (resolve)=>require(['../pages/Home'], resolve)
const About = (resolve)=>require(['../pages/About'], resolve)
const PageNotFound = (resolve)=>require(['../pages/PageNotFound'], resolve)
const News = (resolve)=>require(['../pages/News'], resolve)
const Message = (resolve)=>require(['../pages/Message'], resolve)
const Detail = (resolve)=>require(['../pages/Detail'], resolve)

Vue.use(VueRouter)

const router = new VueRouter({
    // 配置路由模式： 默认是hash模式
    mode:'history', //  使用h5模式
    // 配置路由表
    routes: [
        {
            name:'zhuye',
            path: '/home',
            component: Home,
            // 子路由配置
            children:[
                {
                    name:'xinwen',
                    path:'/home/news',
                    component:News
                },
                {
                    // 子路由路径可以简写，注意前面没有 /
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            // params参数占位
                            path:'detail/:id/:title?',
                            // 1. query参数 无需占位
                            // path:'detail',
                            component:Detail,
                            // 1. 对象: 可以直接传递给 路由组件的props，但是数据是死的
                            // props:{xx:100, yy:200}
                            // 2. boolean
                            //    2-1. true： 将params参数，变为路由组件的props参数接收。query不行
                            //    2-2. false  不做转化
                            // props:false
                            // 3. props: 回调函数
                            //    3-1. 调用时机：当前路由被激活的时候调用
                            //    3-2. 参数：当前路由对象 $route
                            //    3-3. 返回值  对象中的所有属性，都可以称为 props接收的数据
                            //    3-4. this指向 undefined
                            props:(route)=>{
                                // console.log('route11111: ', route)
                                return {...route.query,...route.params}
                            }
                        }
                    ]
                },
                {
                    path:'/home',
                    redirect:'/home/news'
                }
            ]
        },
        {
            name:'guanyu',
            path: '/about',
            component: About
        },
        {
            path: '/',
            // 路由重定向 配置默认页
            redirect: '/home'
        },
        {
            // 配置404页面
            path: '*',
            component: PageNotFound
        }
    ]
})

export default router